<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div>一号</div>
		<div cLass="box">二号</div>
		<div cLass="box content">三号</div>
		<div class="box" id="container">四号</div>
		<script type="text/javascript" charset="utf-8">
		//1.根据id名获取
		var ele=document.getElementById('container')//获取id为container的元素
		console.log(ele)
		var abc=document.getElementById('abc')//没有该元素，返回值为null
		
		//2.根据类名获取
			//返回值为伪数组形式，返回所有包含目标class的元素
		var arr1=document.getElementsByClassName('box')
		var arr2=document.getElementsByClassName('content')
		var arr3=document.getElementsByClassName('abc')
		console.log(arr1)
		console.log(arr2)
		console.log(arr3)
		
		//3.根据标签名获取元素
			//返回值也是伪数组,返回所有包含该标签名的元素
			var div=document.getElementsByTagName('div')
			console.log(div)
			
		//4.根据选贼获取元素
			//获取满足选择器规则的 第一个元素
			var selector1=document.querySelector('div')
			var selector2=document.querySelector('.box')
			var selector3=document.querySelector('#abc')
			//log太多了，直接上控制台输出变量查看结果即可
			
			//获取满足选择器规则的所有元素
				//返回值为伪数组形式
			var selectorArr1=document.querySelectorAll('div')
			var selectorArr2=document.querySelectorAll('.box')
			var selectorArr3=document.querySelectorAll('#abc')
		</script>
	</body>
</html>
